import React, { useState, useEffect } from "react";
import { connect } from "dva";
import { Table, Modal, Dropdown, Button, Menu, Avatar, Tooltip, Tag, Radio, Input, message, Card, Icon } from "antd";
import styles from "./index.less";

const { Search } = Input;

const OnlineSkillTable = ({ dispatch, data, group, tableLoading, total }) => {
	const [selectedRowKeys, setSelectedRowKeys] = useState([]);
	const [selectedRows, setSelectedRows] = useState([]);
	const [selectedRow, setSelectedRow] = useState({});
	const [name, setName] = useState("");

	const distributeModeSession = {
		0: "",
		1: "智能分配",
		2: "等量分配",
		3: "按忙碌程度分配",
	};

	const distributeModeLeave = {
		0: "",
		1: "等量分配",
		2: "全组处理",
	};

	const status = {
		"-1": "删除",
		0: "正常",
		1: "禁用",
		2: "失效",
	};

	const columns = [
		{
			title: "客服",
			dataIndex: "username",
			key: "username",
		},
		// {
		// 	title: "员工编号",
		// 	dataIndex: "jobNo",
		// 	key: "jobNo",
		// },
		{
			title: "状态",
			dataIndex: "disabled",
			key: "disabled",
			render: (text) => {
				return (
					<Button size='small' type={text ? "danger" : "primary"}>{status[text]}</Button>
				);
			},
		},
		{
			title: "操作",
			dataIndex: "action",
			key: "action",
			width: "120px",
			render: (text, record) => (
				<Button type='danger' onClick={() => handleDelete(record)} icon='delete' size='small'>删除</Button>
			),
		},
	];

	// 删除
	function handleDelete(text) {
		Modal.confirm({
			title: "删除确认",
			content: `确定要删除【${text["username"]}】?`,
			okText: "确定",
			cancelText: "取消",
			okButtonProps: {
				type: "danger",
			},
			onOk: () => {
				dispatch({
					type: "onlineSkillSet/deleteUser",
					payload: { id: group.id, groupUserIds: text.id },
					callback(res) {
						message.success("删除成功");
						handleSearch({ id: group.id, name, current: 1, size: 10, });
					},
				});
			},
		});
	}

	// 批量删除
	function handleDeleteAll() {
		if (!selectedRows.length) {
			message.warning("请选择要删除的数据 ");
			return;
		};
		Modal.confirm({
			title: "删除确认",
			content: `确定要删除选中的${selectedRows.length}条数据?`,
			okText: "确定",
			cancelText: "取消",
			okButtonProps: {
				type: "danger",
			},
			onOk: () => {
				dispatch({
					type: "onlineSkillSet/deleteUser",
					payload: { id: group.id, groupUserIds: selectedRowKeys.join(",") },
					callback(res) {
						message.success("删除成功");
						handleSearch({ id: group.id, name, current: 1, size: 10, });
					},
				});
			},
		});
	}

	// 编辑
	const showAddGroup = () => {
		dispatch({
			type: "onlineSkillSet/showAddGroup",
			payload: {
				visible: true,
				editGroup: group,
			},
		});
	};

	// 翻页
	const onChange = (page, pageSize) => {
		handleSearch({
			id: group.id,
			name: "",
			current: page,
			size: pageSize,
		});
	};

	// 添加组成员
	const showAddGroupMember = () => {
		if (typeof group.id != 'undefined' && group.id) {
			dispatch({
				type: "onlineSkillSet/showGroupMember",
				payload: {
					isShowAddGroupMember: true,
					id: group.id,
				},
			});
		} else {
			message.info('请先添加技能组')
		}
	};

	// 查询
	const handleSearch = (payload) => {
		dispatch({
			type: "onlineSkillSet/loadGroup",
			payload,
		});
	};

	return (
		<Card className={styles.table} bordered={false} style={{ height: '100%' }} bodyStyle={{ padding: "10px 20px", height: '100%' }}>
			<div className={styles.info}>
				<div className={styles.title}>
					<span>技能组信息</span>
				</div>
				{group.groupName && (
					<div className={styles.content}>
						<div className={styles.action}>
							<div className={styles.label}>
								<span>技能组名称 :</span>
								<span> {group ? group.groupName : ""}</span>
							</div>
							<div onClick={showAddGroup}>
								<Icon type='edit' style={{ margin: "0 5px" }} />
								编辑
							</div>
						</div>
						<div className={styles.label}>
							<span>会话分配模式:</span>
							<span>{distributeModeSession[group ? group.distributeModeSession : "0"]}</span>

							<Tooltip placement='right' title={"根据可接待客服当前的会话量、接待能力和是否接待过等因素进行综合排序分配"}>
								<Icon type='info-circle' style={{ margin: "0 5px" }} />
							</Tooltip>
						</div>
						{/* <div className={styles.label}>
							<span>留言分配模式 :</span>
							<span>{distributeModeLeave[group ? group.distributeModeLeave : "0"]}</span>
						</div> */}
					</div>
				)}
			</div>
			<div className={styles.body}>
				<div className={styles.header}>
					<div className={styles.headerLeft}>
						<span>组员列表</span>
					</div>
					<div className={styles.headerRight}>
						<Search
							placeholder='请输入员工姓名'
							style={{ width: 335 }}
							onSearch={(value) => {
								handleSearch({ id: group.id, name: value, current: 1, size: 10 });
							}}
						/>
						<Button type='danger' className={styles.btn} style={{ background: "#999999", borderColor: "#999999" }} onClick={handleDeleteAll}>批量操作</Button>
						<Button type='primary' className={styles.btn} onClick={showAddGroupMember}>添加组成员</Button>
					</div>
				</div>
				<Table
					loading={tableLoading}
					dataSource={data}
					columns={columns}
					rowSelection={{
						selectedRowKeys,
						onChange: (selectedRowKeys, selectedRows) => {
							setSelectedRowKeys(selectedRowKeys);
							setSelectedRows(selectedRows);
						},
					}}
					pagination={{
						pageSize: 10,
						onChange: onChange,
						total: total,
					}}
					rowKey={(record) => record.id}
				/>
			</div>
		</Card>
	);
};

export default connect(({ onlineSkillSet }) => ({
	...onlineSkillSet,
}))(OnlineSkillTable);
